<template>
    <div>
       <div class="filter-container">
            <el-button class="filter-item" @click="addAccount" type="primary" icon="el-icon-plus">添加子账户</el-button><span class="tip">提示：您可以自主添加2个子账户，添加第三个及以上的子账户需要平台审核通过后方可操作。</span>
       </div>
       <el-dialog title="添加子账户" :visible.sync="Visibleadd">
            <el-form :model="form">
                <el-form-item label="子账户名" :label-width="formLabelWidth">
                    <span>{{text}}</span>
                </el-form-item>
                <el-form-item label="登录密码" :label-width="formLabelWidth">
                    <el-input v-model="form.loginPass" placeholder="支持15位以内字母及数字组合" autocomplete="off"  style="width:300px;"></el-input>
                </el-form-item>
                <el-form-item label="交易密码" :label-width="formLabelWidth" >
                    <el-input v-model="form.tranPass" placeholder="支持6位纯数字" autocomplete="off" :maxlength="6" style="width:300px;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visibleadd = false">取 消</el-button>
                <el-button type="primary" @click="btn">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="更改登录密码" :visible.sync="Visible1">
            <el-form :model="formData">
                <el-form-item label="新登录密码" :label-width="formLabelWidth">
                <el-input v-model="formData.loginPass" placeholder="请输入登录密码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visible1 = false">取 消</el-button>
                <el-button type="primary" @click="btn1()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="更改交易密码" :visible.sync="Visible2">
            <el-form :model="formData">
                <el-form-item label="新交易密码" :label-width="formLabelWidth" >
                <el-input v-model="formData.tranPass" placeholder="请输入交易密码" :maxlength="6"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visible2 = false">取 消</el-button>
                <el-button type="primary" @click="btn2()">确 定</el-button>
            </div>
        </el-dialog>
       <el-table :data="list" border fit highlight-current-row style="width: 100%;">
            <el-table-column align="center" label="时间">
                <template slot-scope="scope">
                <span>{{scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="子账户">
                <template slot-scope="scope">
                <span>{{scope.row.subAccount}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="登录密码">
                <template slot-scope="scope">
                <span>{{scope.row.loginPass}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="交易密码">
                <template slot-scope="scope">
                <span>{{scope.row.tranPass}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="登录状态">
                <template slot-scope="scope">
                <span v-html="scope.row.accountStatus==0?'正常登录':scope.row.accountStatus==1?'审核中':scope.row.accountStatus==2?'已冻结':'已驳回'"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="400" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.accountStatus == 0" type="danger" size="mini" @click="handleFreeze(scope.row)">冻结</el-button>
                    <el-button v-if="scope.row.accountStatus == 2" size="mini" @click="handleHot(scope.row)">解冻</el-button>
                    <el-button v-if="scope.row.accountStatus == 9" size="mini" @click="reasonsView(scope.row)">查看驳回原因</el-button>
                    <el-button type="primary" size="mini" v-if="scope.row.accountStatus != 9" @click="handleLogin(scope.row)">更改登录密码</el-button>
                    <el-button type="primary" size="mini" v-if="scope.row.accountStatus != 9" @click="handleTran(scope.row)">更改交易密码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="驳回原因" :visible.sync="View">
            <span>{{applyRemark?applyRemark:'暂无原因'}}</span>
            <div slot="footer" class="dialog-footer">
                <el-button @click="View = false">取 消</el-button>
                <el-button type="primary" @click="View = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        pageSize: 10,
      },
      applyRemark: '',
      View: false,
      Visibleadd: false,
      Visible1: false,
      Visible2: false,
      formLabelWidth: '120px',
      text: '',
      subAccount: '',
      formData: {  
        loginPass: '',
        tranPass: ''
      },
      form: {  
        loginPass: '',
        tranPass: ''
      },
    }
  },
  created() {
    this.getsuAccount()
  },
  methods: {
    addAccount(){
        var that = this
        that.$post({
            api: "/account/isAllowAdd",
            data: {
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.Visibleadd =true
            that.text = data.data
        }else{
            this.$alert(data.msg, '提示', {
            dangerouslyUseHTMLString: true
            });
        }      
        console.log("isAllowAdd",data)
        });
    },
    btn(){
         var that = this
        that.$post({
            api: "/account/addSubAccountInfo",
            data: {
                subAccount: that.text,
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                loginPass: that.form.loginPass,
                tranPass: that.form.tranPass,
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.Visibleadd = false
           that.getsuAccount()
           this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success',
                duration: 2000
            })
        }else{
             that.$message({
                type: 'info',
                message: data.msg
            }); 
        }
        console.log("addSubAccountInfo",data)
        });
    },
    getsuAccount(){
      var that = this
      that.$post({
            api: "/account/subAccountInfoListNet",
            data: {
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.list = data.data
        }
        console.log("subAccountInfoList",data)
        });
    },  
    handleFreeze(row){
      var that = this
      this.$confirm('冻结此子账户后，则不可进行登陆此系统。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         that.$post({
            api: "/account/updateSubAccountInfo",
            data: {
                 subAccount: row.subAccount,
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                // loginPass: row.loginPass,
                accountStatus: 2,
                // tranPass: row.tranPass
            }
        }).then(({ data }) => {
            if(data.code === 0){
                // that.list = data.data
                that.getsuAccount()  
                this.$notify({
                    title: '成功',
                    message: '冻结成功',
                    type: 'success',
                    duration: 2000
                })
            }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
     
    },
    handleHot(row){
      var that = this
      that.$post({
            api: "/account/updateSubAccountInfo",
            data: {
                 subAccount: row.subAccount,
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                // loginPass: row.loginPass,
                accountStatus: 0,
                // tranPass: row.tranPass
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.getsuAccount()
        that.getsuAccount()  
                this.$notify({
                    title: '成功',
                    message: '解冻成功',
                    type: 'success',
                    duration: 2000
                })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
     
    },
    
    handleLogin(row) {
     var that = this
     that.Visible1 = true
     that.subAccount = row.subAccount
     that.formData.loginPass = ''
      
    },
    btn1(){
        var that = this
        that.$post({
            api: "/account/updateSubAccountInfo",
            data: {
                subAccount: that.subAccount,
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                // loginPass: row.loginPass,
                // accountStatus: 1,
                loginPass: that.formData.loginPass
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.getsuAccount()
            that.Visible1 = false
           that.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000
            })
        }else{
             that.$message({
                type: 'info',
                message: data.msg
            }); 
        }
        console.log("updateSubAccountInfo",data)
        });
    },
    reasonsView(row) {
     var that = this
     that.View = true
     that.applyRemark = row.accountRemark
    },
    handleTran(row) {
      var that = this
     that.Visible2 = true
     that.subAccount = row.subAccount
     that.formData.tranPass = ''
    },
    btn2(){
         var that = this
      that.$post({
            api: "/account/updateSubAccountInfo",
            data: {
                subAccount: that.subAccount,
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                tranPass: that.formData.tranPass,
                // accountStatus: 1,
                // tranPass: "zwm2321421"
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.getsuAccount()
             that.Visible2 = false
           this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000
            })
        }else{
             that.$message({
                type: 'info',
                message: data.msg
            }); 
        }
        console.log("updateSubAccountInfo",data)
        });
    }
  }
}
</script>

<style lang="scss" scoped>
.tip{
    margin-left: 30px;
}
</style>
